import React, { Fragment } from 'react'
import { connect } from 'react-redux'

const TodoList = props => {
  const { inputValue, inputChange, clickBtn, list } = props
  return (
    <Fragment>
      <div>
        <input value={inputValue} onChange={inputChange} />
        <button onClick={clickBtn}>提交</button>
      </div>
      <ul>
        {list.map((item, index) => {
          return <li key={index + item}> {item}</li>
        })}
      </ul>
    </Fragment>
  )
}

// class TodoList extends Component {
//   constructor(props) {
//     super(props)
//     this.state = store.getState()
//   }
//   render() {
//     const { inputValue, inputChange, clickBtn, list } = this.props
//     return (
//       <Fragment>
//         <div>
//           <input value={inputValue} onChange={inputChange} />
//           <button onClick={clickBtn}>提交</button>
//         </div>
//         <ul>
//           {list.map((item, index) => {
//             return <li key={index + item}> {item}</li>
//           })}
//         </ul>
//       </Fragment>
//     )
//   }
// }

const stateToProps = state => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}

const dispatchToProps = dispatch => {
  return {
    inputChange(e) {
      const action = {
        type: 'change_input',
        value: e.target.value
      }
      dispatch(action)
    },
    clickBtn() {
      const action = {
        type: 'add_item'
      }
      dispatch(action)
    }
  }
}
export default connect(stateToProps, dispatchToProps)(TodoList)
